
<template>
  <div>
    <h1>{{catalogue.label}}</h1>
    <div id="content">
      <p v-html="catalogue.content"></p>
    </div>
    <div id="comment">
      <el-card :style="{height:'100px'}" class="box-card">
        <div slot="header" class="clearfix">
          <span>评论区</span>
        </div>
        <div id="first-comment" v-if="commentList == null">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-form-item prop="content" style="margin-left:-26px">
              <div class="input-new-content">
                <img :src="$store.state.user.avatar" alt />
                <el-input
                  v-model="formData.content"
                  type="textarea"
                  :maxlength="255"
                  placeholder="还没有人评论，快来抢沙发！"
                  :autosize="{minRows: 3, maxRows: 4}"
                  :style="{width: '84%'}"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item size="large">
              <el-button
                type="default"
                :style="{width:'6.5%',marginLeft:'840px',position:'relative',bottom:'10px',backgroundColor:'#67C23A',color:'white'}"
                round
                @click="submitForm"
              >提交</el-button>
            </el-form-item>
          </el-form>
          <div></div>
        </div>
        <Comment
          v-if="commentList != null"
          :catalogueId="catalogueId"
          :comments="commentList"
          @reload="getContent"
        ></Comment>
      </el-card>
    </div>
  </div>
</template>
<script>
import Comment from "@/components/Comment";
// import { createNamespacedHelpers } from "vuex";
// 创建 catalogue 模块的引用,使用别名调用多个模块
// const {
//   mapState: catalogueMapState,
//   mapActions: catalogueMapActions
// } = createNamespacedHelpers("catalogue");
import { insertComment } from "@/api/comment";
import { getCatalogue } from "@/api/catalogue";

export default {
  data() {
    return {
      catalogue: {},
      commentList: [],
      formData: {
        content: "",
        parentId: null,
        catalogueId: this.$route.query.chapterId,
        avatar: this.$store.state.user.avatar,
        nickname: this.$store.state.user.nickName,
        userId: this.$store.state.user.id
      },
      catalogueId: this.$route.query.chapterId,
      rules: {
        content: [
          {
            required: true,
            message: "评论内容不能为空",
            trigger: "submit"
          }
        ]
      }
    };
  },
  // computed: {
  //   ...catalogueMapState({
  //     map: state => state.map
  //   })
  // },
  async mounted() {
    await this.getContent();
  },

  methods: {
    async getContent() {
      const { data: res } = await getCatalogue(this.$route.query.chapterId);
      const map = res.data.map;
      this.catalogue = map.catalogue;
      this.commentList = map.commentList;
    },
    submitForm() {
      var _this = this;
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        else {
          this.post();
        }
        // TODO 提交表单
      });
    },
    async post() {
      await insertComment(this.formData);
      this.getContent();
    }
    // ...catalogueMapActions(["load"])
  },
  components: {
    Comment
  }
};
</script>
<style scoped>
h1 {
  font-size: 2em !important;
}
#editor {
  margin-top: 2em;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

#content {
  min-height: 300px;
  min-width: 100%;
  box-sizing: border-box;
  padding: 20px 100px;
  text-align: left;
  margin-bottom: 5em;
}
#comment {
  min-height: 200px;
  width: 90%;
  margin: auto;
}
#first-comment {
  box-sizing: border-box;
  padding: 0 40px;
  margin-top: 40px;
  align-items: left;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  box-sizing: border-box;
  padding-right: 50px;
  margin: auto;
}
</style>
<style lang="scss" scoped>
.input-new-content {
  text-align: left;
  width: 100%;
  margin-left: 27px;
  & > img {
    position: relative;
    bottom: 20px;
    margin-right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
}
</style>